<template>
	<view class="handsel-detail p-20">
		<template v-if="detail">
			<view class="grey m-b-15 f-base">转赠信息</view>
			<view class="content flex-no-horizontal">
				<u-image :src="detail.image" width="252rpx" height="252rpx" radius="3"></u-image>
				<view class="info-title">
					<view class="f-large bold m-b-10">
						{{detail.title}}{{detail.name}}
					</view>
					<view class="f-base grey f-base">
						#{{detail.number}}
					</view>
				</view>
			</view>
			<view class="grey m-b-15 f-base">转赠方区块链地址</view>
			<view class="content f-base grey-8 content-padding">
				{{detail.from_address}}
			</view>
			<view class="grey m-b-15 f-base">受赠方区块链地址</view>
			<view class="content grey-8 f-base content-padding">
				{{detail.to_address}}
			</view>
			<view class="grey m-b-15 f-base">交易哈希</view>
			<view class="content grey-8 f-base content-padding" @click="query">
				{{detail.hash ? detail.hash : '藏品上链中'}}
			</view>
		</template>
	</view>
</template>

<script>
	import {
		handselDetail
	} from '@/api/collection.js'
	export default {
		data() {
			return {
				detail: null
			}
		},
		async onLoad(e) {
			uni.showLoading({
				title: '加载中...'
			})
			try {
				const res = await handselDetail({
					nft_log_id: Number(e.id)
				})
				this.detail = res.data.data
				uni.hideLoading()
			} catch (e) {
				uni.hideLoading()
				console.log(e)
				uni.showToast({
					title: e.message || e.data,
					icon: 'none'
				})
				//TODO handle the exception
			}
		},
		methods: {
			query() {
				if (this.detail.hash) {
					uni.navigateTo({
						url: `./otherPage?url=${this.detail.nft_url}`
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.handsel-detail {
		background: #121416;
		height: 100%;
		color: white;

		.grey {
			opacity: 0.5;
		}

		.grey-8 {
			opacity: 0.8;
		}

		.content {
			border-radius: 10rpx;
			background-color: #1E2022;
			margin-bottom: 50rpx;
			word-break: break-all;

			.info-title {
				margin-left: 40rpx;
			}
		}

		.content-padding {
			padding: 40rpx 30rpx;
		}
	}
</style>
